Dekorative Bilder und Illustrationen
Letztes Update:
13. Dezember 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Dekorative Bilder helfen zum Teil die Verständlichkeit/Wahrnehmbarkeit der Informationen zu verbessern (z.B. abgrenzende Linien zwischen Informationsblöcken,…)
In Form von beispielsweise Illustrationen (wie bei Just Away) dienen sie der visuellen Dekoration zwecks Emotionalisierung bzw. als Beitrag zur Marke.
Dekorative Bilder beinhalten keine Informationen.
Wann kommt dieses Element zum Einsatz?
Zur Verbesserung der Informationsaufbereitung bzw. Verständlichkeit/Wahrnehmbarkeit werden sie ausschließlich im Rahmen des CDs bzw. des UI-Designs konzipiert/entwickelt.
Der Einsatz der Illustrationen bei Just Away …. (…. Definition folgt….)
UX Konzeption
Bilder benötigen im Regelfall einen beschreibenden Alternativtext, der den Bildinhalt und den Informationsgehalt des Bildes konkret beschreibt, um diesen Nutzern und Bots zugänglich zu machen, die die visuelle Ansicht des Bildes nicht wahrnehmen können.
Bei dekorativen Bildern hingegen darf kein Alternativtext angegeben werden um diese als dekorativ zu kennzeichnen. Das Attribut alt="" muss vorhanden, jedoch leer sein, damit diese als dekorativ erkannt werden können.
Zusätzlich können dekorative Bilder über die WAI-ARIA Spezifikation role="presentation" bzw. „none“ ausgeblendet werden. Dies ersetzt jedoch nicht den leeren Alternativtext.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
UX-Writing
Was ist zu texten
keine Texte/Benennungen nötig – im Gegenteil – der Alt-Text muss leer bleiben!